<script>
import {useRouteLocale} from "@vuepress/client";
import {defineComponent, h} from "vue";
import {useLink} from "vue-router";
import CommonWrapper from "@theme-hope/components/CommonWrapper";
import NotFoundHint from "@theme-hope/components/NotFoundHint";
import SkipLink from "@theme-hope/components/SkipLink";
import {useThemeLocaleData} from "@theme-hope/composables/index";

export default defineComponent({
  name: "NotFound",
  slots: Object,
  setup(_props, {slots}) {
    const routeLocale = useRouteLocale();
    const themeLocale = useThemeLocaleData();
    const {navigate} = useLink({
      to: themeLocale.value.home ?? routeLocale.value,
    });
    return () => [
      h(SkipLink),
      h(CommonWrapper, {noSidebar: true}, () => h("main", {
        id: "main-content",
        class: "vp-page not-found"
      }, slots.default?.() || [
        h("img", {src: "/assets/image/病毒.svg"}),
        h("div", {innerHTML: "页面被吃掉了💔", class: ["error_text"]}),
        h("div", {class: "actions"}, [
          h("button", {
            type: "button",
            class: "action-button",
            onClick: () => {
              window.history.go(-1);
            },
          }, themeLocale.value.routeLocales.back),
          h("button", {
            type: "button",
            class: "action-button default",
            onClick: () => navigate(),
          },  themeLocale.value.routeLocales.home),
        ]),
      ])),
    ];
  },
  });
//# sourceMappingURL=NotFound.js.map
</script>
<style scoped lang="scss">
.vp-page.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  width: 100vw;
  max-width: var(--home-page-width);
  margin: 0 auto;
  padding: calc(var(--navbar-height) + 1rem) 1rem 1rem !important;

  text-align: center;

  .error_text {
    color:white;
    font-family: "微软雅黑,sans-serif";
    font-size: 48px;
    font-weight: 500;
    width:400px;
    height: 100px;
    text-shadow: #f03740 -1px -3px,#2addfd 3px 0px;/*抖音字体效果*/
  }

  .action-button {
    display: inline-block;

    box-sizing: border-box;

    margin: 0.25rem;
    padding: 0.75rem 1rem;
    border-width: 0;
    border-bottom: 1px solid var(--theme-color-dark);
    border-radius: 3rem;

    background: var(--theme-color);
    color: var(--white);
    outline: none;

    font-size: 1rem;

    transition: background 0.1s ease;

    &:hover {
      background: var(--theme-color-light);
      cursor: pointer;
    }
  }
}
</style>
